<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="flex flex-wrap gap-4 p-2">
				<el-button type="primary" @click="formDialogRef.openDialog()">请假</el-button>
				<el-button type="primary" @click="preProjectDialogRef.openDialog()">项目报备</el-button>
				<el-button type="primary" @click="addProjectDialogRef.openDialog()">项目立项</el-button>
				<el-button type="primary" @click="contractDialogRef.openDialog()">项目合同</el-button>
			</div>
			<!-- 请假编辑、新增  -->
			<ask-for-leave-form ref="formDialogRef" />
			<pre-project-form ref="preProjectDialogRef" />
			<add-project-form ref="addProjectDialogRef" />
			<contract-form ref="contractDialogRef" />
		</div>
	</div>
</template>

<script setup lang="ts" name="systemFlwProcess">
import { queryAllProcessList } from '@/api/oa/flwProcess';
const list = ref([]);
// 引入组件
const askForLeaveForm = defineAsyncComponent(() => import('./forms/askForLeaveForm.vue'));
const preProjectForm = defineAsyncComponent(() => import('./forms/preProjectForm.vue'));
const addProjectForm = defineAsyncComponent(() => import('./forms/addProjectForm.vue'));
const contractForm = defineAsyncComponent(() => import('./forms/contractForm.vue'));
const router = useRouter();

// 定义变量内容
const formDialogRef = ref();
const preProjectDialogRef = ref();
const addProjectDialogRef = ref();
const contractDialogRef = ref();

function enterWorkflowDesign(instanceUrl?: string) {
	router.push({ path: instanceUrl, query: {} });
}
function getList() {
	queryAllProcessList().then((res) => {
		list.value = res.data;
	});
}
onMounted(() => {
	getList();
});
</script>
